import React, {Component} from 'react';
import {AppRegistry,StyleSheet,Text,View,Image,TextInput} from 'react-native';

// 获取设备宽高
var Dimensions     = require('Dimensions');
var {width,height} = Dimensions.get('window');

class loginView extends Component {
    render() {
        return (

            <View style={styles.container}>
                {/*头像*/}
                <Image source={require('./icon.png')} style={styles.iconStyle}/>

                {/*账号和密码*/}
                <View style = {styles.textInputViewStyle}>
                  <TextInput placeholder={'请输入用户名'} style={styles.textInputStyle} />
                  <TextInput placeholder={'请输入密码'}   style={styles.textInputStyle} password={true} />
                </View>

                {/*登录*/}
                <View style={styles.loginBtnStyle}>
                    <Text style={{color:'white'}}>登录</Text>
                </View>

                {/*设置*/}
                <View style={styles.settingStyle}>
                    <Text>无法登录</Text>
                    <Text>新用户</Text>
                </View>

                {/*其他的登录方式*/}
                <View style={styles.otherLoginStyle}>
                    <Text>其他登录方式: </Text>
                    <Image  source={require('./icon3.png')}  style={styles.otherImageStyle} />
                    <Image  source={require('./icon7.png')}  style={styles.otherImageStyle} />
                    <Image  source={require('./icon8.png')}  style={styles.otherImageStyle} />
                </View>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#dddddd',
        alignItems:'center'
    },
    // 头像样式
    iconStyle:{
       marginTop:50,
       marginBottom:30,
       width:80,
       height:80,
       borderRadius:40,
       borderWidth:2,
       borderColor:'white'
    },
    // 文本输入框样式
    textInputStyle:{
        height:38,
        width:width-20,
        backgroundColor:'white',
        marginBottom:1,
        textAlign:'center'
    },
    textInputViewStyle:{
        height:40*2,
        width:width-20,
    },
    // 登录按钮样式
    loginBtnStyle:{
        height:35,
        width:width*0.9,
        backgroundColor:'blue',
        marginTop:30,
        marginBottom:20,

        justifyContent:'center',
        alignItems:'center',

        borderRadius:8
    },

    settingStyle:{
        flexDirection:'row',
        width:width*0.9,
        justifyContent:'space-between'
    },

    // 其他登录方式样式
    otherLoginStyle:{
        flexDirection:'row',
        alignItems:'center',

        // 绝对定位
        position:'absolute',
        bottom:10,
        left:20
    },

    otherImageStyle:{
        width:30,
        height:30,
        borderRadius:15,
        marginLeft:8
    }
});

// 输出类
module.exports = loginView;
